<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>评价效果</title>
		<style type="text/css">
			*{
				margin: 0 auto;
			}
			#box{
				width: 200px;
				height: 80px;
				text-align: center;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/star_02.png" id="one"/>
			<img src="img/star_02.png" id="two"/>
			<img src="img/star_02.png" id="three"/>
			<img src="img/star_02.png" id="four"/>
			<img src="img/star_02.png" id="five"/>
		</div>
		<script>
			var box =document.getElementById("box");
			var one = document.getElementById("one");
			var two = document.getElementById("two");
			var three = document.getElementById("three");
			var four = document.getElementById("four");
			var five = document.getElementById("five");
			function show(id){
				id.onmouseover = function(){	
				id.src = "img/star_01.png";
				}
			};
			show(one);
			show(two);
			show(three);
			show(four);
			show(five);
			box.onclick =function(){
				var i = 0;
				var str = box.innerHTML;
				if(one.src == "http://127.0.0.1:8020/P206/img/star_01.png"){
					i++;
				}
				if(two.src == "http://127.0.0.1:8020/P206/img/star_01.png"){
					i++;
				}
				if(three.src == "http://127.0.0.1:8020/P206/img/star_01.png"){
					i++;
				}
				if(four.src == "http://127.0.0.1:8020/P206/img/star_01.png"){
					i++;
				}
				if(five.src == "http://127.0.0.1:8020/P206/img/star_01.png"){
					i++;
				}
				box.innerHTML = str+i+"颗星!"
			}
		</script>
	</body>
</html>
